<template>
  <div>
    <SearchHeader v-model="queryParam.where.keyword" :canAdd="false" @handleSearch="getData" @handleInit="queryParam.init">
      <Row>
        <Col span="4"><UserSelect ref="srhUserSelect" width="200px" v-model="queryParam.where.userId" :placeholder="$t('select_people')"></UserSelect> </Col>
        <Col span="4">
          <Select v-model="queryParam.where.logType"  :placeholder="$t('log_type')" clearable>
            <Option v-for="item in logTypes" :value="item.code" :key="item.code">{{ item.desc }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Select v-model="queryParam.where.functionId"  :placeholder="$t('function_module')" clearable>
            <Option v-for="item in operateFunctions" :value="item.code" :key="item.code">{{ item.desc }}</Option>
          </Select>
        </Col>
        <Col span="4"><DateTimeRangeSelect ref="eventTime" v-model="dateRange" :placeholder="$t('datetime')" width="100%"></DateTimeRangeSelect> </Col>
      </Row>

    </SearchHeader>
    <Table border :columns="columns" :data="tableData" :loading="tableLoading"></Table>
    <TopnavPage v-model="queryParam.page" @changePage="changePage"></TopnavPage>
  </div>
</template>
<script>
import DateTimeRangeSelect from "_c/topnav/DateTimeRangeSelect"
import SearchHeader from "@/view/Common/SearchHeader";
import TopnavPage from "_c/topnav/TopnavPage";
import UserSelect from "_c/topnav/UserModelSelect";
import OperateLog from "@/api/OperateLog"
import EnumQuery from "@/api/EnumQuery"
import {apiResult} from "@/libs/util";
export default {
  components:{SearchHeader,DateTimeRangeSelect,UserSelect,TopnavPage},
  computed: {},
  data(){
    return{
      api: new OperateLog(),
      enumApi: new EnumQuery(),
      dateRange: [],
      queryParam: {
        page: {
          pages: 1,
          size: 15,
          total: 0,
          current: 1,
        },
        where: {
          userId:null,
          logType: null,
          functionId: null,
          from: null,
          to: null,

        },
        init: ()=>{
          this.queryParam.where.keyword=null;
          this.queryParam.where.fromTime=null;
          this.queryParam.where.toTime=null;
        }
      },
      tableData:[],
      tableLoading:false,
      columns:[
          {title: this.$t('time'), key: 'time', sortable: true,width: 200,align: 'center',ellipsis:true,tooltip:true,tooltipTheme:'light'},
          {title: this.$t('user_account'), key: 'userCode', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light'},
          {title: this.$t('user_name'), key: 'userName', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light'},
          {title: this.$t('log_type'), key: 'logTypeDesc', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light'},
          {title: this.$t('function_module'), key: 'functionDesc', sortable: true, ellipsis:true,width: 200},
          {title: this.$t('bus_content'), key: 'context', sortable: true,ellipsis:true,width: 200,tooltip:true,tooltipTheme:'light'},
      ],

      logTypes:[],
      operateFunctions:[]
    }
  },
  methods:{
    getData(){
      if (!(this.dateRange == null || this.dateRange.length < 2 || this.dateRange[0] == "")) {
        this.queryParam.where.fromTime = this.dateRange[0];
        this.queryParam.where.toTime = this.dateRange[1];
      }
      //const msg = this.$Message.loading({content: this.$t('wait_dispose_message'),duration: 10});
      this.api.page(JSON.stringify(this.queryParam)).then(res=>{
        //setTimeout(msg, 100); //关闭正加载条
        console.log(res)
        apiResult(res.data,false,result=>{
          this.queryParam.page.total = result.data.total;
          this.tableData = result.data.records;

          if (!!this.tableData && this.tableData.length > 0){
            this.tableData.forEach(item=>{
              item.logTypeDesc = this.$t(item.logTypeDesc)
              item.functionDesc = this.$t(item.functionDesc)
              if (!!item.context){
                const obj = JSON.parse(item.context);
                let context = null;
                if (!!obj){
                  if (!!obj.code){
                    context = obj.code;
                  }
                  if (!!obj.name){
                    context = !!context?context+":" + obj.name:obj.name;
                  }
                }
                item.context = context;

              }
            })
          }
        });
      })
    },
    changePage(){this.getData()}
  },
  mounted() {
    /** 为了显示用，调置默认值 */
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 2);
    start.setHours(0);
    start.setMinutes(0);
    start.setSeconds(0);
    start.setMilliseconds(0);
    end.setHours(23);
    end.setMinutes(59);
    end.setSeconds(59);
    end.setMilliseconds(999);
    this.dateRange = [start, end];
    this.getData();

    this.enumApi.get('EnumLogType').then(res=>{

      apiResult(res.data,false,result=>{
        this.logTypes = result.data;
        if (!!this.logTypes && this.logTypes.length > 0){
          this.logTypes.forEach(item=>{
            item.desc = this.$t(item.desc)
          })
        }
      });
    })
    this.enumApi.get('EnumOperateFunction').then(res=>{

      apiResult(res.data,false,result=>{
        this.operateFunctions = result.data;
        if (!!this.operateFunctions && this.operateFunctions.length > 0){
          this.operateFunctions.forEach(item=>{
            item.desc = this.$t(item.desc)
          })
        }
      });
    })
  }
}
</script>
<style lang="less">

</style>
